import { memo } from 'react';
import { Tag } from 'antd';
import type { PresetColorType, PresetStatusColorType } from 'antd/lib/_util/colors';

type Color = PresetColorType | PresetStatusColorType;
interface IPropsType {
	value: number;
	options: { value?: number; label?: string; color?: string }[];
	color?: Color;
	fieldNames?: { value?: string; label?: string; color?: string };
}

export type DictsType = {
	value: number;
	label: string;
	color?: Color;
}[];

export interface DictType {
	value: number;
	label: string;
	color?: Color;
}

const DictTag = memo((props: IPropsType) => {
	const { value, options, color, fieldNames } = props;

	const defaultFieldNames = { value: 'value', label: 'label', color: 'color', ...fieldNames };

	const currentTag = options.find((item) => item[defaultFieldNames.value] === value);

	return currentTag?.[defaultFieldNames.color] ? (
		<Tag color={color ?? currentTag?.[defaultFieldNames.color]}>
			{currentTag?.[defaultFieldNames.label] ?? '-'}
		</Tag>
	) : (
		<span>{currentTag?.[defaultFieldNames.label] ?? '-'}</span>
	);
});

export default DictTag;
